<template>
  <a-row type="flex" style="flex-flow: inherit;">
    <a-col :flex="toggle ? '210px' : '30px'" style="margin-right: 12px;background-color: #fff;">
      <depart-tree :rootOpened="true" :multi="false" @ok="getTreeData" @toggleBool="toggleBool" />
      <!-- <groups-tree @tree="getTreeData" @selectedKeys="getSelectedKeys" /> -->
    </a-col>
    <!-- <a-col > -->
<!--      <a-card :bordered="false" style="margin-bottom: 10px">qwe</a-card>-->
      <a-tabs default-active-key="1" >
        <a-tab-pane key="1" tab="SJSK人员报到">
          <List1 ref=list1Id :departmentId="departmentId"/>
        </a-tab-pane>
        <a-tab-pane key="2" tab="变更执行地人员报到" force-render>
          <List2 ref=list2Id :departmentId="departmentId"/>
        </a-tab-pane>
        <a-tab-pane key="3" tab="异地管控人员报到" force-render>
          <List3 ref=list3Id :departmentId="departmentId"/>
        </a-tab-pane>
      </a-tabs>
    <!-- </a-col> -->
  </a-row>
</template>

<script>
  import List1 from './sjskList.vue'
  import List2 from './changeList.vue'
  import List3 from './otherPlaceList.vue'
  import DepartTree from '@/views/sjsk/modules/departTree'
  export default {
      components: { List1, List2,List3,DepartTree, },
    data() {
      return {
        treeDatas: [],
        toggle: true,
        departmentId:''
      }
    },
    methods: {
      // 选中组织架构树，赋值到人员列表搜索框
      getTreeData(datas, id) {
        if (id != undefined && id != null && id != "") {
          this.departmentId = id
          // this.$set(this.pageFilter, 'departmentId', id)
          // this.onQuery()
        }
      },
      toggleBool(bool) {
        console.log(bool)
        this.toggle = bool
    }
    }
  }
  </script>

  <style lang="less" scoped>
  /deep/.ant-tabs-bar {
    background-color: #fff;
  }
  </style>